<template>
	<view class="page-container">
	  <!-- 状态栏占位 -->
	  <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
	  
	  <!-- 顶部导航栏 -->
	  <view class="nav-bar">
		<view class="right-icons">
		  <image class="setting-icon" src="/static/icons/setting.png" mode="aspectFit"></image>
		</view>
	  </view>
  
	  <!-- 用户信息区域 -->
	  <view class="user-info">
		<view class="user-basic">
		  <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
		  <view class="user-detail">
			<view class="nickname">{{ userInfo.nickname }}</view>
			<view class="edit-profile" @tap="goToEditProfile">
			  ✎完善个人资料
			</view>
		  </view>
		</view>
  
		<!-- 功能按钮组 -->
		<view class="function-group">
		  <view class="function-item" @tap="goToJiLu">
			<text>浏览记录</text>
		  </view>
		  <view class="function-item" @tap="gocollect">
			<text>收藏夹</text>
		  </view>
		</view>
	  </view>
  
	  <!-- 内容标签页 -->
	  <view class="content-tabs">
		<view class="tab-header">
		  <view 
			class="tab-item" 
			:class="{ active: currentTab === 'follow' }"
			@tap="switchTab('follow')"
		  >
			关注的事件
		  </view>
		</view>
  
		<!-- 事件列表 -->
		<scroll-view 
		  class="event-list" 
		  scroll-y 
		  @scrolltolower="loadMore"
		  refresher-enabled
		  :refresher-triggered="isRefreshing"
		  @refresherrefresh="onRefresh"
		>
		  <view 
			class="event-item" 
			v-for="(item, index) in eventList" 
			:key="index"
		  >
			<view class="event-title">{{ item.title }}</view>
			<view class="event-stats">
			  <text>{{ item.views }}人关注，</text>
			  <text>{{ item.comments }}条评论</text>
			  <text class="event-time">{{ item.time }}</text>
			</view>
		  </view>
		</scroll-view>
	  </view>
  
	  <!-- 底部导航栏 -->
	  <view class="tab-bar">
		<view class="tab-bar-item">
		  <text class="iconfont" @tap="gotozhoubao"></text>
		  <text>舟报</text>
		</view>
		<view class="tab-bar-item active">
		  <text class="iconfont"></text>
		  <text>我的</text>
		</view>
	  </view>
	</view>
  </template>
  
  <script>
  export default {
	data() {
	  return {
		statusBarHeight: 20,
		userInfo: {
		  avatar: '/static/images/default-avatar.png',
		  nickname: '微信用户123'
		},
		currentTab: 'follow',
		isRefreshing: false,
		eventList: [
		  {
			title: '演员李明锐开播马斗宇宙，最近宣布退圈',
			views: '330',
			comments: '114',
			time: '2025-01-03'
		  },
		  {
			title: '美保险巨头CEO"喊灵粮" 枪杀',
			views: '330',
			comments: '114',
			time: '2022-12-30'
		  }
		]
	  }
	},
	onLoad() {
	  this.getStatusBarHeight()
	},
	methods: {
	  gotozhoubao (){
		  uni.navigateTo({
		    url: '/pages/zhoubao/zhoubao'
		  }) 
	  },
	  getStatusBarHeight() {
		const systemInfo = uni.getSystemInfoSync()
		this.statusBarHeight = systemInfo.statusBarHeight
	  },
	  switchTab(tab) {
		this.currentTab = tab
	  },
	  goToEditProfile() {
		uni.navigateTo({
		  url: '/pages/profile/edit'
		})
	  },
	  async onRefresh() {
		this.isRefreshing = true
		await this.loadData()
		this.isRefreshing = false
	  },
	  loadMore() {
		// 实现加载更多逻辑
	  },
	  async loadData() {
		// 模拟数据加载
		return new Promise(resolve => setTimeout(resolve, 1000))
	  },
	  goToJiLu() {
		  uni.navigateTo({
		    url: '/pages/liulanjilu/liulanjilu'
		  })
	  },
	  gocollect() {
		  uni.navigateTo({
		    url: '/pages/colllection/colllection'
		  })
	  }
	}
  }
  </script>
  
  <style scoped>
  .page-container {
	min-height: 100vh;
	background-color: #f8f8f8;
  }
  
  .status-bar {
	background-color: #fff;
  }
  
  .nav-bar {
	height: 44px;
	background-color: #fff;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 0 30rpx;
  }
  
  .setting-icon {
	width: 44rpx;
	height: 44rpx;
  }
  
  .user-info {
	background-color: #fff;
	padding: 20rpx 30rpx 40rpx;
  }
  
  .user-basic {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
  }
  
  .avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	margin-right: 20rpx;
  }
  
  .user-detail {
	flex: 1;
  }
  
  .nickname {
	font-size: 32rpx;
	font-weight: 500;
	margin-bottom: 10rpx;
  }
  
  .edit-profile {
	font-size: 24rpx;
	color: #666;
  }
  
  .function-group {
	display: flex;
	justify-content: space-between;
  }
  
  .function-item {
	font-size: 28rpx;
	color: #333;
  }
  
  .content-tabs {
	background-color: #fff;
	margin-top: 20rpx;
	flex: 1;
  }
  
  .tab-header {
	display: flex;
	height: 88rpx;
	border-bottom: 1rpx solid #eee;
  }
  
  .tab-item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #666;
	position: relative;
  }
  
  .tab-item.active {
	font-weight: 500;
  }
  
  .tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background-color: #8a2be2;
  }
  
  .event-list {
	height: calc(100vh - 400rpx);
  }
  
  .event-item {
	padding: 30rpx;
	border-bottom: 1rpx solid #f5f5f5;
  }
  
  .event-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 16rpx;
  }
  
  .event-stats {
	font-size: 24rpx;
	color: #999;
  }
  
  .event-time {
	float: right;
  }
  
  .tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #fff;
	display: flex;
	border-top: 1rpx solid #eee;
  }
  
  .tab-bar-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	color: #666;
  }
  
  .tab-bar-item.active {
	color: #8a2be2;
  }
  
  .tab-bar-item .iconfont {
	font-size: 40rpx;
	margin-bottom: 4rpx;
  }
  </style>